<template>
	<view class="" style="background-color: #f8f8f8;">
		<view class="" style="height: 26rpx;"></view>
		<view class="" style="padding: 30rpx;background-color: #fff;">
			<view class="" style="display: flex;align-items: center">
				<view class="" style="width: 12rpx;height: 18px;background-color: #2570ff;border-radius: 10px;"></view>
				<view class="" style="margin-left: 20rpx;font-weight: bold;font-size: 30rpx;">
					工作中心
				</view>
			</view>
			<view class="" style="display: flex;padding: 50rpx 30rpx 20rpx 30rpx;flex-wrap: wrap;">
				<view class="" style="display: flex;flex-direction: column;align-items: center;width: 25%;" @click="toCustom">
					<image :src="imgUrl+'custom.png'" mode="" style="width: 100rpx;height: 100rpx;"></image>
					<view class="" style="font-size: 26rpx;margin-top: 10rpx;">
						客户
					</view>
				</view>
				<view class="" style="display: flex;flex-direction: column;align-items: center;width: 25%;" @click="toSupplier">
					<image :src="imgUrl+'supplier.png'" mode="" style="width: 100rpx;height: 100rpx;"></image>
					<view class="" style="font-size: 26rpx;margin-top: 10rpx;">
						供应商
					</view>
				</view>
				<view class="" style="display: flex;flex-direction: column;align-items: center;width: 25%;" @click="toMemorandum">
					<image :src="imgUrl+'memorandum.png'" mode="" style="width: 100rpx;height: 100rpx;"></image>
					<view class="" style="font-size: 26rpx;margin-top: 10rpx;">
						备忘录
					</view>
				</view>
				<view class="" style="display: flex;flex-direction: column;align-items: center;width: 25%;" @click="toMailbox">
					<image :src="imgUrl+'mailbox.png'" mode="" style="width: 100rpx;height: 100rpx;"></image>
					<view class="" style="font-size: 26rpx;margin-top: 10rpx;">
						董事长邮箱
					</view>
				</view>
				<view class="" style="display: flex;flex-direction: column;align-items: center;width: 25%;margin-top: 30rpx;" @click="scanCode">
					<image :src="imgUrl+'scanCode.png'" mode="" style="width: 100rpx;height: 100rpx;"></image>
					<view class="" style="font-size: 26rpx;margin-top: 10rpx;">
						扫一扫
					</view>
				</view>
				<view class="" style="display: flex;flex-direction: column;align-items: center;width: 25%;margin-top: 30rpx;" @click="loginOut">
					<image :src="imgUrl+'loginout.png'" mode="" style="width: 100rpx;height: 100rpx;"></image>
					<view class="" style="font-size: 26rpx;margin-top: 10rpx;">
						退出登录
					</view>
				</view>
			</view>
		</view>
		<view class="" style="height: 26rpx;"></view>
		<view class="" style="display: flex;align-items: center;background-color: #fff;padding: 18rpx 30rpx;" @click="toNotice">
			<view class="" style="min-width: 70px;">
				<u-tag text="通知公告" mode="dark" shape="circle" />
			</view>
			<view class="" style="color: #f1f1f1;font-size: 36rpx;margin: 0 20rpx;">
				丨
			</view>
			<view class="" style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
				{{MessageList[0].title}}
			</view>
		</view>
		<view class="" style="height: 26rpx;"></view>
		<view class="" style="padding: 30rpx;background-color: #fff;">
			<view class="" style="display: flex;align-items: center">
				<view class="" style="width: 12rpx;height: 18px;background-color: #2570ff;border-radius: 10px;"></view>
				<view class="" style="margin-left: 20rpx;font-weight: bold;font-size: 30rpx;">
					客户中心
				</view>
			</view>
			<view class="" style="display: flex;justify-content: space-between;align-items: center;padding: 50rpx 30rpx;">
				<view class="" style="">
					<view class="">客户总数：</view>
					<view class="" style="font-size: 50rpx;margin-top: 10rpx;font-weight: bold;color: #256ffd;">
						{{indexData.customer_total}}
					</view>
				</view>
				<view class="" style="height: 60rpx;width: 1rpx;border-right: 1rpx solid #f1f1f1;">
					
				</view>
				<view class="" style="">
					<view class="">本月新增客户：</view>
					<view class="" style="font-size: 50rpx;margin-top: 10rpx;font-weight: bold;color: #256ffd;">
						{{indexData.customer_month}}
					</view>
				</view>
			</view>
		</view>
		<view class="" style="height: 26rpx;"></view>
		<view class="" style="padding: 30rpx;background-color: #fff;">
			<view class="" style="display: flex;align-items: center">
				<view class="" style="width: 12rpx;height: 18px;background-color: #2570ff;border-radius: 10px;"></view>
				<view class="" style="margin-left: 20rpx;font-weight: bold;font-size: 30rpx;">
					供应商中心
				</view>
			</view>
			<view class="" style="display: flex;justify-content: space-between;align-items: center;padding: 50rpx 30rpx;">
				<view class="" style="">
					<view class="">供应商总数：</view>
					<view class="" style="font-size: 50rpx;margin-top: 10rpx;font-weight: bold;color: #256ffd;">
						{{indexData.supplier_total}}
					</view>
				</view>
				<view class="" style="height: 60rpx;width: 1rpx;border-right: 1rpx solid #f1f1f1;">
					
				</view>
				<view class="" style="">
					<view class="">本月新增供应商：</view>
					<view class="" style="font-size: 50rpx;margin-top: 10rpx;font-weight: bold;color: #256ffd;">
						{{indexData.supplier_month}}
					</view>
				</view>
			</view>
		</view>
		<view class="" style="height: 26rpx;"></view>
		<view class="" style="padding: 30rpx;background-color: #fff;">
			<view class="" style="display: flex;align-items: center">
				<view class="" style="width: 12rpx;height: 18px;background-color: #2570ff;border-radius: 10px;"></view>
				<view class="" style="margin-left: 20rpx;font-weight: bold;font-size: 30rpx;">
					订单中心
				</view>
			</view>
			<view class="" style="display: flex;justify-content: space-between;align-items: center;padding: 50rpx 30rpx;">
				<view class="" style="">
					<view class="">订单数量：</view>
					<view class="" style="font-size: 50rpx;margin-top: 10rpx;font-weight: bold;color: #256ffd;">
						{{indexData.order_total}}
					</view>
				</view>
				<view class="" style="height: 60rpx;width: 1rpx;border-right: 1rpx solid #f1f1f1;">
					
				</view>
				<view class="" style="">
					<view class="">本月新增订单数：</view>
					<view class="" style="font-size: 50rpx;margin-top: 10rpx;font-weight: bold;color: #256ffd;">
						{{indexData.order_month}}
					</view>
				</view>
			</view>
		</view>
		<view class="" style="height: 26rpx;"></view>
		<view class="" style="padding: 30rpx;background-color: #fff;">
			<view class="" style="display: flex;justify-content: space-between;align-items: center;">
				<view class="" style="display: flex;align-items: center">
					<view class="" style="width: 12rpx;height: 18px;background-color: #2570ff;border-radius: 10px;"></view>
					<view class="" style="margin-left: 20rpx;font-weight: bold;font-size: 30rpx;">
						备忘录
					</view>
				</view>
				<view class="" style="color: #adadad;" @click="toMemorandum">
					查看更多>
				</view>
			</view>
			
			<view class="" style="display: flex;justify-content: space-between;align-items: center;padding: 30rpx 0rpx;">
				<view class="uni-margin-wrap">
							<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
								:duration="duration">
								<swiper-item v-for="(item,index) in MemorandumList">
									<view class="" style="height: 500rpx;">
									<view style="height: 90%;width: 100%;background-color: #f5f7fb;border-radius: 20rpx;padding: 20rpx;">
										<view class="" style="display: flex;justify-content: space-between;border-bottom: 1rpx solid #d5d7da;padding: 20rpx 0;">
											<view class="" style="display: flex;">
												<img src="../../static/img/ream.png" alt="" style="width: 40rpx;height: 40rpx;min-height: 40rpx;min-width: 40rpx;" />
												<view class="" style="margin-left: 30rpx;">
													<view class="" style="width: 450rpx;;font-weight: bold;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
														{{item.title}}
													</view>
													<view class="" style="font-size: 24rpx;color: #898b8f;margin-top: 10rpx;">
														{{item.remindDate}}
													</view>
												</view>
											</view>
											<view class="">
												<image src="../../static/img/yb.png" mode="" style="width: 80rpx;height: 80rpx;" v-if="item.level == 1"></image>
												<image src="../../static/img/jj.png" mode="" style="width: 80rpx;height: 80rpx;" v-if="item.level == 2"></image>
											</view>
										</view>
										<view class="" style="padding: 20rpx;">
											<view class="" style="height: 192rpx;overflow: hidden;text-overflow: ellipsis;color: #898b8f;">
												{{item.content}}
											</view>
											<view class="" style="display: flex;justify-content: center;height: 30rpx;margin-top: 20rpx;">
												<text style="color: #2b85e4;text-decoration: underline;" @click="toDetail(item)">查看详情</text>
											</view>
										</view>
									</view>
									</view>
								</swiper-item>
							</swiper>
						</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				indexData:{},
				MessageList:[],
				MemorandumList:[],
				background: ['color1', 'color2', 'color3'],
				indicatorDots: true,
				autoplay: false,
				interval: 2000,
				duration: 500,
				imgUrl:''
			}
		},
		onShow() {
			this.getIndex()
			this.getMessageList()
			this.getMemorandumList()
			console.log(this.pictureUrl)
			this.imgUrl = this.pictureUrl
		},
		methods: {
			scanCode(){
				uni.scanCode({
					onlyFromCamera: true,
					success: function (res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
					}
				});
			},
			async getIndex(){
				const res = await this.$api.Index()
				console.log('indexData',res)
				if(res.code==1){
					this.indexData = res.data
				}else{
					this.$refs.uToast.show({
						title: res.msg,
						type: 'error'
					})
				}
			},
			async getMessageList(){
				const res = await this.$api.MessageList()
				console.log('公告',res)
				if(res.code==1){
					this.MessageList = res.data.data
				}else{
					this.$refs.uToast.show({
						title: res.msg,
						type: 'error'
					})
				}
			},
			toMailbox(){
				uni.navigateTo({
					url:'/pages/mailbox/mailbox'
				})
			},
			toNotice(){
				uni.navigateTo({
					url:'/pages/notice/list'
				})
			},
			toDetail(item){
				uni.navigateTo({
					url:'/pages/memorandum/memorandumDetail?id='+item.id
				})
			},
			async getMemorandumList(){
				const res = await this.$api.MemorandumList()
				console.log('备忘录',res)
				if(res.code==1){
					this.MemorandumList = res.data.data
				}else{
					this.$refs.uToast.show({
						title: res.msg,
						type: 'error'
					})
				}
			},
			changeIndicatorDots(e) {
			            this.indicatorDots = !this.indicatorDots
			        },
			        changeAutoplay(e) {
			            this.autoplay = !this.autoplay
			        },
			        intervalChange(e) {
			            this.interval = e.target.value
			        },
			        durationChange(e) {
			            this.duration = e.target.value
			        },
					loginOut(){
						uni.clearStorage()
						uni.navigateTo({
							url:'/pages/login/login'
						})
					},
					toMemorandum(){
						uni.navigateTo({
							url:'/pages/memorandum/memorandum'
						})
					},
					toCustom(){
						uni.navigateTo({
							url:'/pages/custom/custom'
						})
					},
					toSupplier(){
						uni.navigateTo({
							url:'/pages/supplier/supplier'
						})
					}
		}
	}
</script>

<style lang="scss">
	.uni-margin-wrap {
			width: 690rpx;
			width: 100%;
		}
		.swiper {
			height: 500rpx;
		}
		.swiper-item {
			display: block;
			height: 500rpx;
			line-height: 500rpx;
			text-align: center;
		}
		.swiper-list {
			margin-top: 40rpx;
			margin-bottom: 0;
		}
		.uni-common-mt {
			margin-top: 60rpx;
			position: relative;
		}
		.info {
			position: absolute;
			right: 20rpx;
		}
		.uni-padding-wrap {
			width: 550rpx;
			padding: 0 100rpx;
		}
</style>
